<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1" />
	<link rel="shortcut icon" href="#" type="image/png">
	<link rel="stylesheet" type="text/css" href="__STATIC__/common/phone/css/bootstrap.min.css"/>
	<link rel="stylesheet" href="__STATIC__/common/phone/css/mui.min.css" />
	<link rel="stylesheet" href="__STATIC__/common/phone/css/mui.picker.min.css" />
	<link rel="stylesheet" href="__STATIC__/common/phone/css/select2.min.css" />
	<link rel="stylesheet" type="text/css" href="__STATIC__/common/phone/css/style.css?20180226" />
	<!--引入图标样式-->
	<link rel="stylesheet" href="__STATIC__/admin/assets/font-awesome/css/font-awesome.min.css">

	<title>业务列表</title>
</head>
<style>
	/*html,body{*/
		/*height: 100%;*/
		/*overflow:hidden;*/
	/*}*/
	.add_order a{
		color: #000;
	}
	.layer_box a{
		color: #66c1fb;
	}
	.sear_sel{
		padding: 5px;
		border: 1px solid #ccc !important;
	}
	.stime_input[type=text],.etime_input[type=text]{
		width: 100%;
		height: 35px;
		border: 1px solid #fff;
		text-indent: 15px;
		background: #66c1fb;
		border-radius: 0px;
		color: #fff;
		font-size: 14px;
		background-repeat: no-repeat;
		background-size: 25px 25px;
		background-position: center left;
		background-image: url("__STATIC__/common/phone/images/calendar.png");
	}
	.search_container{
		height: 295px;
	}
</style>
<body>
	<div class="nav_top">
		<a href="{:url('home')}" class="home_logo">
			<img src="__STATIC__/common/phone/images/home1.png"/>
		</a>
		<a class="back_btn" id="back_btn">
			<img src="__STATIC__/common/phone/images/back1.png"/>
		</a>
	</div>
	
	<div class="search_name">
		<div class="search_outline">
			<form  action="{:url('olist')}">
				<input type="text" class="search_text" value="{$form.only}" name="only" placeholder="ID/姓名/电话/微信">
				<button type="submit" class="search_img">
					<img src="__STATIC__/common/phone/images/search2.png" style="margin-top: -5px;" >
				</button>
			</form>
		</div>
	</div>
	<div class="count_customer">
		<div class="order_flex">
			<div class="order_function add_order">
				<a href="javascript:showlayer('{:url('add')}','新增订单');" >
					<img src="__STATIC__/common/phone/images/add.png"/>
					<span>新增订单</span>
				</a>

			</div>
			<div class="order_function order_search">
				<img src="__STATIC__/common/phone/images/search.png"/>
				<span>高级搜索</span>
			</div>
		</div>
		<!--搜索订单 -->
		<div class="search_container">
			<div class="search_content">
				<form  action="{:url('index')}">
					<div class="search_input">
						<div class="search_item_box">
							<input type="text" class="ordinary_input"  name="only" placeholder="ID/姓名/电话/微信"  onfocus="this.placeholder=''" onblur="this.placeholder='ID/姓名/电话/微信'">
						</div>
						<div class="search_item_box">
							<input class="stime_input" id="stime_input" type="text" placeholder="请选择开始邀约时间"  onfocus="this.placeholder=''" onblur="this.placeholder='请选择邀约开始时间'"/>
							<input class="etime_input" id="etime_input" type="text" placeholder="请选择结束邀约时间"  onfocus="this.placeholder=''" onblur="this.placeholder='请选择邀约结束时间'"/>
							<input type="hidden" name="yytime" id="yytime">
						</div>
						<div class="search_item_box">
							<select name="mendian" class="sear_sel" >
								<option value="">选择门店</option>
								{volist name="mendian" id="vo"}
								<option value="{$vo.id}" >{$vo.name}</option>
								{/volist}
							</select>
						</div>
						<button type="submit" class="search_btn" onclick="search()"><img src="__STATIC__/common/phone/images/search1.png"/></button>
					</div>
				</form>
				<div class="toggle_btn">
					<img src="__STATIC__/common/phone/images/down_up.png"/>
				</div>
			</div>
		</div>
		<!--搜索订单-->
		<!--订单列表-->
		<div class="customer_list">
			<table class="table" border="0" cellspacing="0" cellpadding="0">
				<tr class="table_head">
					<th>ID</th>
					<th>姓名</th>
					<th>电话</th>
					<th>邀约客服</th>
					<th>查看</th>
				</tr>
				{volist name='list' id='info'}
				<tr>
					<td>{$info.id}</td>
					<td>{$info.name_z}</td>
					<td>{$info.phone_z}</td>
					<td>{$info.yykf_text}</td>
					<td class="layer_box" style="font-size: 18px;color: #66c1fb;">
						<a href="javascript:showlayer('{:url('edit',['id'=>$info['id'],])}','订单信息&nbsp;&nbsp;{$info.name_z}-{$info.phone_z}');" >
							<i class="fa fa-search-plus"></i>
						</a>
					</td>

				</tr>
				{/volist}
			</table>
			<div class="pagination nav_pagination_cancel" style="text-align:center;">
				{$page}
			</div>
		</div>
	</div>
	
<script type="text/javascript" src="__STATIC__/common/phone/js/jquery-3.2.0.min.js" ></script>
<script type="text/javascript" src="__STATIC__/common/phone/js/bootstrap.min.js" ></script>
<!--引入layer插件-->
<script type="text/javascript" src="__STATIC__/common/layer/layer.js"></script>
<script type="text/javascript" src="__STATIC__/common/phone/js/mui.min.js" ></script>
<script type="text/javascript" src="__STATIC__/common/phone/js/mui.picker.min.js" ></script>
<script type="text/javascript" src="__STATIC__/common/phone/js/select2.full.js" ></script>

<script>
	$(function(){
//		弹出新增订单
		$('#add_order').click(function(){
			$('.layer_black').show();
			$('#add_neworder').addClass('add_neworder_ani').show();
		})
		$('#cancel_btn,.layer_black').click(function(){
			$('.layer_black,#add_neworder,.layer_container').hide();
			$('#add_neworder').removeClass('add_neworder_ani');
		})
//		弹出查看详情框
		$('.layer_box').click(function(){
			$('.layer_black').show();
			$('.layer_container').show();
		})
//		带搜索的下拉选择框
		$('.form_select_1').select2({
		  placeholder: 'Select an option'
		});
		$('.section_input').select2({
		  placeholder: 'Select an option'
		});
		$('.revise_selevt').select2({
		  placeholder: 'Select an option'
		});
//		搜索设置
		var search_set=$('.search_set_content').html();
		$('.set_btn').click(function(){
			layer.open({
				title: [
			      '搜索设置',
			      'background-color: #f5f5f5; color:#373737;height:45px;line-height:45px'
			    ],
			    type: 1,
			    content: search_set,
			    anim: 'up',
			    style: 'position:fixed; bottom:50%; margin-bottom:-200px;left:5%; width: 90%; height: 400px; border:none;border-radius:3px'
			  });
		})
		var choose_val=$('.set_choose_btn').val();
		$('.set_choose_btn').click(function(){
			if(choose_val==1){
				$(this).removeClass('active');
				choose_val=2;
			}else{
				$(this).addClass('active');
				choose_val=1;
			}
		})



//		表单设置
		var table_set_content=$('.table_set_content').html();
		$('#table_set').click(function(){
			layer.open({
				title: [
			      '表格设置',
			      'background-color: #f5f5f5; color:#373737;height:45px;line-height:45px'
			    ],
			    type: 1,
			    content: table_set_content,
			    anim: 'up',
			    style: 'position:fixed; bottom:50%; margin-bottom:-200px;left:5%; width: 90%; height: 400px; border:none;border-radius:3px;'
			  });
		})


//		时间插件
		$('.stime_input').click(function(){
			var dtPicker = new mui.DtPicker({
				"type": "date"
			});
		    dtPicker.show(function (selectItems) {
		        $('.stime_input').val(selectItems)
		    })
		})
        $('.etime_input').click(function(){
            var dtPicker = new mui.DtPicker({
                "type": "date"
            });
            dtPicker.show(function (selectItems) {
                $('.etime_input').val(selectItems)
            })
        })
		$('.form_control_time').click(function(){
			var dtPicker = new mui.DtPicker({
				"type": "date"
			});
		    dtPicker.show(function (selectItems) {
		        $('.form_control_time').val(selectItems)
		    })
		})
		$('.revise_time_01').click(function(){
			var dtPicker = new mui.DtPicker({
				"type": "date"
			});
		    dtPicker.show(function (selectItems) {
		        $('.revise_time_01').val(selectItems)
		    })
		})
		$('.revise_time_02').click(function(){
			var dtPicker = new mui.DtPicker({
				"type": "hour"
			});
		    dtPicker.show(function (selectItems) {
		        $('.revise_time_02').val(selectItems)
		    })
		})


//		弹出搜索框
		$('.order_search').click(function(){
			$('.search_container').show(300);
		})
		$('.toggle_btn').click(function(){
			$('.search_container').hide(300);
		})


	})
    //带时间插件的控件阻止弹出输入法——start

    $('#stime_input').focus(function(){
        document.activeElement.blur();
    });
    $('#etime_input').focus(function(){
        document.activeElement.blur();
    });
    //带时间插件的控件阻止弹出输入法——end
    function search() {
        var stime = $('#stime_input').val();
        var etime = $('#etime_input').val();
        if(stime!="" && etime!=""){
            var times =stime+'~'+etime;
            $('#yytime').val(times);
		}
    }

    //查看详情
    function showlayer(url,text) {
        layer.open({
            type: 2,
            title: text,
            shadeClose: false,
            shade: 0.1,
            area: ['90%', '85%'],
            content:url
        });
    }
    
    //返回上一步
	$('#back_btn').click(function () {
        window.history.go(-1);
    });

	 
</script>
</body>
</html>
